<template>
  <div class="main">
    <div class="air-quality">
      <div class="air-quality__header">门禁系统</div>
      <div class="air-quality__content row full-height-pm25 padding-full">
        <div ref="left" class="col-8 full-height">
          <div class="row third">
            <div class="col-24 full-height">
              <district-left :controlInfo="resList" :controlInfoList="list"></district-left>
            </div>
          </div>
          <div class="row third">
            <open-success-rate :controlInfo="resList"></open-success-rate>
          </div>
          <div class="row third">
            <access-control-open-history :controlInfoList="list"></access-control-open-history>
          </div>
        </div>
        <div ref="left" class="col-16 full-height scroll">
          <div class="row four" v-for="(item, key) in resList" :key="key">
            <div class="col-8 full-height padding-right-x">
              <southeast :title="item.list[0].gateName" :controlInfo="item" :gateId = "item.id"></southeast>
            </div>
            <div class="col-16 full-height padding-left-x">
              <access-control-history :controlInfo="item"></access-control-history>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import api from 'api'
import formatDate from 'filters/format-date'
import openSuccessRate from './components/openSuccessRate'
import districtLeft from './components/districtLeft'
import southeast from './components/southeast'
import accessControlOpenHistory from './components/accessControlOpenHistory'
// import accessControlOpenHistory from './components/accessControlOpenHistory'
import accessControlHistory from './components/accessControlSoutheastHistory'

export default {
  name: 'accessControl',

  components: {
    openSuccessRate,
    districtLeft,
    southeast,
    accessControlOpenHistory,
    accessControlHistory
  },

  data () {
    return {
      // 假数据
      list: [
        {
          'gateId': '134447',
          'count': 2,
          'gateName': '北门',
          'openDate': '2017-06-27'
        }, {
          'gateId': '134447',
          'count': 1,
          'gateName': '一门',
          'openDate': '2017-06-27'
        }, {
          'gateId': '134447',
          'count': 3,
          'gateName': '一门',
          'openDate': '2017-06-26'
        }, {
          'gateId': '134447',
          'count': 1,
          'gateName': '三门',
          'openDate': '2017-06-27'
        }, {
          'gateId': '134447',
          'count': 1,
          'gateName': '南门',
          'openDate': '2017-06-27'
        }
      ]
    }
  },
  computed: {
    resList () {
      let arr = []
      // 将相同id的项组起来
      this.list.forEach((item) => {
        let finded = _.find(arr, (element) => {
          return element.id === item.gateId
        })
        if (!finded) {
          let arred = _.filter(this.list, (element) => {
            return item.gateId === element.gateId
          })
          arr.push({
            id: item.gateId,
            list: arred
          })
        }
      })
      return arr
    }
  },
  mounted () {
    this.getData()
  },

  methods: {
    /**
     * 处理栅格大小调整
     * @param {String} i 索引
     * @param {Number} newH 调整后的高度
     * @param {Number} newW 调整后的宽度
     */
    onResize (i, newH, newW) {
      console.log('Resize')
    },
    requestRestfulData () {
    },
    // 获取门禁数据接口
    getData () {
      let params = {
        // 'startDate': '2017-06-01T00:00:00',
        'startDate': `${formatDate(new Date() - 60 * 1000 * 60 * 24 * 29, 'yyyy-MM-dd', true)}T00:00:00`,
        'endDate': `${formatDate(new Date(), 'yyyy-MM-dd', true)}T00:00:00`
      }
      let param = {
        app_id: '2e0fa6b2844f2800'
      }
      let pa = {
        'id': '320fa2b2a38d3200',
        'secret': '70a18d9635da7146ce5710645d3dc2d5'
      }
      let listOpenGate = {
        'query': {
        }
      }
      // 保存30天内
      api.accessKey.getAccessKey(pa).then((res) => {
        api.plugin.getAppToKen(param, res.data.access_token).then((res) => {
          window.localStorage.setItem('appToken', res.data.access_token)
          api.control.getControl(params).then((res) => {
            // debugger
            console.log('30天统计数据')
            console.log(res)
            this.list = res.data.list
          })
          api.control.getListOpenGate(listOpenGate).then((res) => {
            console.log(res)
          })
          // }
        }).catch((err) => {
          console.log(err)
        })
      })
    }
  }
}
</script>

<style lang="stylus">
@import '../../../assets/stylus/base'

.air-quality {
  absolute: left top;
  left: 0;
  size: 100%;
  padding-top: 52px;
  min-width: 800px;
  box-sizing: border-box;

  // padding: 52px 400px 40px 0;
  // font-size: 0;
  // color: #fff;
  box-sizing border-box
  .air-quality__header {
    font-size: 24px;
    font-weight: 200;
    line-height: 24px;
    padding: 20px 0 10px 20px;
    box-sizing border-box
  }
  .air-quality__content {
    absolute: left 0 top 0;
    width: 100%;
    height: 100%;
    padding-top: 106px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .four {
    padding: 5px;
    box-sizing: border-box;
    height: 25%
  }
}

.full-height-pm25 {
  height: 100%
}
.padding-left-x {
  padding-left 5px;
  box-sizing: border-box;
}
.padding-right-x {
  box-sizing: border-box;
  padding-right 5px;
}
.padding-top-x {
  padding-top 5px;
  box-sizing: border-box;
}
.padding-bottom-x {
  box-sizing: border-box;
  padding-bottom 5px;
}
.second {
  height: 50%
}
.padding-full {
  padding: 5px;
  box-sizing: border-box;
}
.scroll{
  overflow auto
}
</style>
